// 编码库
import React, {Component} from 'react';
import {connect} from 'react-redux';
import {withRouter} from 'react-router-dom';
import PropTypes from 'prop-types';
import roleAction from '../../store/actions/roleList';
import jurisdictionAction from '../../store/actions/jurisdictionList';
import {Drawer, Button, Input, Form, Checkbox, Radio, Select, InputNumber} from 'antd';
import {editJurisdiction, addJurisdiction} from '../../api';

import './Header.scss';
import Header from './JurisdictionList';

const CheckboxGroup = Checkbox.Group;

class CodeHeader extends Component {
  static propTypes = {
    data: PropTypes.object,
    visible: PropTypes.bool,
    onClose: PropTypes.func,
    showDrawer: PropTypes.func
  };
  handleOk = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log(this.props);
        const {data} = this.props;
        const isEdit = data.hasOwnProperty('title');
        values.sort = values.sort + '';
        console.log(data);
        if (isEdit) {
          // 编辑
          const postData = {
            permission_id: data.permission_id,
            ...values
          };
          editJurisdiction(postData).then(res => {
            console.log(res);
            this.props.GET_JURISDICTION_LIST();
            this.props.form.resetFields();
            this.props.onClose();
          }).catch(err => {
            console.log(err);
          });
        } else {
          // 增加
          addJurisdiction(values).then(res => {
            console.log(res);
            this.props.GET_JURISDICTION_LIST();
            this.props.form.resetFields();
            this.props.onClose();
          }).catch(err => {
            console.log(err);
          });
        }

      }
    });
  };

  isShowOnChange = e => {
    console.log('radio checked', e.target.value);
    this.setState({
      value: e.target.value
    });
  };

  isTrueOnChange = e => {
    console.log('radio checked', e.target.value);
    this.setState({
      value: e.target.value
    });
  };

  tempOnClose = () => {
    this.props.onClose();
    this.props.form.resetFields();
  };

  componentDidMount() {
    this.props.GET_JURISDICTION_LIST();
  }

  render() {
    const {getFieldDecorator} = this.props.form;
    const {roleListData, jurisdictionList, showDrawer, data} = this.props;
    return (
      <>
        <div className='MaterialGroup__head'>
          <h3>权限列表</h3>
          <Button type="primary" onClick={showDrawer}> 增 加</Button>
        </div>
        {/*抽屉开始*/}
        <Drawer
          width={500}
          title="权限信息"
          placement="right"
          closable={true}
          onClose={this.tempOnClose}
          visible={this.props.visible}
        >

          <Form className="drawer-form" onSubmit={this.handleOk}>

            <Form.Item label="权限名称">
              {getFieldDecorator('title', {
                initialValue: data.title || '',
                rules: [{
                  required: true,
                  message: '请填写权限名称...'
                }]
              })(
                <Input placeholder='权限名称'/>
              )}
            </Form.Item>

            <Form.Item label="权限路径">
              {getFieldDecorator('path', {
                initialValue: data.path || '',
                rules: [{
                  required: true,
                  message: '请填写权限路径...'
                }]
              })(
                <Input placeholder='权限路径'/>
              )}
            </Form.Item>

            <Form.Item label="权限权重">
              {getFieldDecorator('sort', {
                initialValue: data.sort || 5,
                rules: [{
                  required: true,
                  message: '请填写权限权重...'
                }]
              })(
                <InputNumber min={1} max={20}/>
              )}
            </Form.Item>

            <Form.Item label="是否显示">
              {getFieldDecorator('is_show', {
                initialValue: data.is_show || '',
                rules: [{
                  required: true,
                  message: '请选择是否显示...'
                }]
              })(
                <Radio.Group>
                  <Radio value={1}>显示</Radio>
                  <Radio value={2}>隐藏</Radio>
                </Radio.Group>
              )}
            </Form.Item>

            <Form.Item label="是否禁用">
              {getFieldDecorator('is_true', {
                initialValue: data.is_true || '',
                rules: [{
                  required: true,
                  message: '请选择是否禁用...'
                }]
              })(
                <Radio.Group>
                  <Radio value={1}>启用</Radio>
                  <Radio value={2}>禁用</Radio>
                </Radio.Group>
              )}
            </Form.Item>

            <Form.Item>
              <div id='drawer-form-buttons'>
                <Button type="primary" className="drawer-form-button" onClick={this.tempOnClose}>取 消</Button>
                <Button type="danger" className="rawer-form-button" onClick={this.handleOk}>确 定</Button>
              </div>
            </Form.Item>

          </Form>
        </Drawer>
        {/*抽屉结束*/}
      </>
    );
  }

}

const mapStateToProps = state => {
  return {
    ...state.roleList,
    ...state.jurisdictionList
  };
};

const WrappedNormalLoginForm = Form.create()(CodeHeader);
export default connect(mapStateToProps, {...roleAction, ...jurisdictionAction})(withRouter(WrappedNormalLoginForm));
